import { Button, Modal } from "antd"
import React, { useEffect } from "react"

interface OfflineModalProps {
  visible: boolean
  onCancel: () => void
}

const OfflineModal: React.FC<OfflineModalProps> = ({ visible, onCancel }) => {
  // 关闭浏览器窗口的函数
  const closeBrowser = () => {
    console.log("尝试关闭谷歌浏览器窗口")

    // 方法1: 尝试使用window.open('', '_parent', 'test').close()
    try {
      const win = window.open("", "_parent", "test")
      if (win) {
        win.close()
      }
    } catch (e) {
      console.error("方法1失败:", e)
    }

    // 方法2: 尝试使用window.open('about:blank', '_top').close()
    try {
      const win = window.open("about:blank", "_top")
      if (win) {
        win.close()
      }
    } catch (e) {
      console.error("方法2失败:", e)
    }

    // 方法3: 尝试使用window.open('', '_self').close() + window.close()
    try {
      const win = window.open("", "_self")
      if (win) {
        win.close()
      }
      window.close()
    } catch (e) {
      console.error("方法3失败:", e)
    }

    // 方法4: 尝试使用window.opener
    try {
      if (window.opener) {
        window.opener.close()
      }
    } catch (e) {
      console.error("方法4失败:", e)
    }

    // 方法5: 尝试使用window.open + window.blur + window.close
    try {
      const newWindow = window.open("", "_self", "")
      window.blur()
      if (newWindow) {
        newWindow.focus()
        newWindow.close()
      }
    } catch (e) {
      console.error("方法5失败:", e)
    }

    // 方法6: 使用window.location.href = "chrome://quit"
    try {
      setTimeout(() => {
        if (document.hasFocus()) {
          window.location.href = "chrome://quit"
        }
      }, 100)
    } catch (e) {
      console.error("方法6失败:", e)
    }

    // 方法7: 使用window.location.replace
    setTimeout(() => {
      if (document.hasFocus()) {
        window.location.replace("about:blank")
        document.write("")
        document.close()
      }
    }, 200)

    // 方法8: 显示明确的提示信息，指导用户手动关闭
    setTimeout(() => {
      if (document.hasFocus()) {
        alert(
          "请手动关闭浏览器窗口，然后重新启动程序。\n\n您可以按Alt+F4或点击浏览器右上角的X按钮关闭窗口。"
        )
      }
    }, 500)
  }

  // 在组件挂载时添加键盘快捷键监听
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // 监听Alt+F4组合键
      if (e.altKey && e.key === "F4" && visible) {
        e.preventDefault()
        onCancel()
        closeBrowser()
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => {
      window.removeEventListener("keydown", handleKeyDown)
    }
  }, [visible, onCancel])

  // 处理确定按钮点击
  const handleOk = () => {
    onCancel() // 先关闭弹窗
    closeBrowser() // 然后关闭浏览器
  }

  return (
    <Modal
      title="连接断开"
      open={visible}
      closable={false}
      maskClosable={false}
      keyboard={false}
      footer={[
        <Button key="ok" type="primary" onClick={handleOk}>
          确定并关闭浏览器
        </Button>
      ]}
    >
      <div style={{ fontSize: "16px", lineHeight: "1.6" }}>
        <p>程序已掉线，请重新开启程序。</p>
        <p>点击确定按钮将自动关闭浏览器窗口。</p>
        <p style={{ color: "#ff4d4f", marginTop: "10px" }}>
          如果浏览器没有自动关闭，请手动按下<strong>Alt+F4</strong>
          或点击浏览器右上角的X按钮关闭窗口。
        </p>
      </div>
    </Modal>
  )
}

export default OfflineModal
